<template>
  <div id="header">
    <Header></Header>
  </div>
  <div id="main" class="inner home-inner" >
    <Main></Main>
  </div>
  <div id="footer" >
    <Footer></Footer>
  </div>
</template>
<script lang='ts'>

import Header from "@/components/Header.vue"
import Main from "@/components/Main.vue"
import Footer from "@/components/Footer.vue"
import { onMounted, reactive, getCurrentInstance, ref } from 'vue'
import { useStore } from "vuex"

export default {
  name: "Index",
  components: { Header, Main, Footer },
  setup() {
    // @ts-ignore
    const { proxy } = getCurrentInstance() // 1.获取proxy实例
    const store = useStore()


    const data = {
      loginId: localStorage.getItem("loginData") ? JSON.parse(localStorage.getItem("loginData") || "").loginId : null,
      token: localStorage.getItem("loginData") ? JSON.parse(localStorage.getItem("loginData") || "").token : null,
      identity: localStorage.getItem("loginData") ? JSON.parse(localStorage.getItem("loginData") || "").identity : null,
    }
    
    const checkloginstate = async () => {
      // 请求后端，查看用户登录状态是否失效
      proxy.$api.authApi.checkLogin(data).then((res: any) => {
        console.log(res.data);
        // 如果请求登录状态失败，则跳转服务器错误，待做
        if (res.data["isLogin"] == "false") {
          store.commit("loginOut")
          localStorage.clear()
        } else {
          return false
        }
      })
    }
    onMounted(() => {
      
      
    })
  },

}
</script>
<style scoped>
.inner {
  width: 1160px;
  margin: 0 auto;
}

.home-inner {
  max-width: 1160px;
}

#header {
  font-family: '微软雅黑';
  height: 58px;
  background-color: #545c64;
}

#main {
  margin-top: 25px;
  height: 1200px;
  /* background-color: rgb(240, 240, 240); */
}

#footer {
  height: 140px;
  background-color: #545c64;
  color: #FFF;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-family: '微软雅黑';
}
</style>